<template>
  <div class="app-container">
    <ul class="tab-tilte">
      <!--  订单状态:-->
      <li :class="item.id===navIndex?'active':''" v-for="item in navList" :key="item.id" @click="switchTab(item)">{{item.txt}}</li>
    </ul>
    <el-card class="filter-container" shadow="never" style="border:none;padding:0!important">
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item>
            <el-input v-model="listQuery.id" class="input-width" placeholder="请输入收货人手机号"></el-input>
          </el-form-item>
          <el-form-item>
            <!-- 0昨天, 1近3天, 2近7天, 3近30天 -->
            <span :class="item.id===dayIndex?'active':''" v-for="item in dayList" :key="item.id" @click="handleday(item)">{{item.txt}}</span>
          </el-form-item>
          <el-button style="float:right" type="primary" @click="handleSearchList()" size="small">查询搜索</el-button>
        </el-form>
      </div>
    </el-card>
    <div class="table-container">
      <div>
        <ul>
          <li v-for="(item,index) of list" :key="index">
            <div class="" @click="headledown(item)">
              <div class="item">
                <span class="orderSn" style="width:300px;">
                  <i class="el-icon-arrow-down"></i>
                  订单编号 {{item.orderSn}}
                </span>
                <span class="createTime" style="width:300px;">下单时间 {{item.createTime}}</span>
                <span class="receiverName" style="width:200px;">收货人 {{item.receiverName}}</span>
                <span class="phone" style="width:200px;">手机 {{item.receiverPhone}}</span>
                <span class="address" style="width:480px;">地址{{item.receiverProvince}}{{item.receiverCity}}{{item.receiverRegion}}{{item.receiverDetailAddress}}</span>
              </div>
              <div class="info" v-for="(listitem,index) of item.orderItemList" :key="index" v-show="item.listitems">
                <div class="iteminfo">
                  <div class="listimg">
                    <img :src="listitem.pic" alt="">
                  </div>
                  <div class="listname">{{listitem.name}}</div>
                  <div class="pirce">单价 ￥{{listitem.price}}</div>
                  <div class="purchase_quantity">购买数量 x{{listitem.quantity}}</div>
                  <div class="goods_amount">商品金额 x{{listitem.quantity*listitem.price}}</div>
                </div>
              </div>
              <div class="item_bottom" v-show="item.listitems">
                <div class="message">买家留言：{{item.message}}</div>
                <div class="using_integrals">使用积分 {{item.useIntegral}}</div>
                <div class="freight">运费 ￥{{item.freightAmount}}</div>
                <div class="actual_payment">实际支付 ￥{{item.payAmount}}</div>
                <el-row>
                  <el-button type="primary" @click.stop="headleDetails(item.id,status)">查看详情</el-button>
                </el-row>
              </div>
            </div>
          </li>
          <el-row v-if="list&&list.length==0" style="position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);color: #909399;">暂无数据</el-row>
        </ul>
      </div>
    </div>
    <div class="pagination-container">
      <el-pagination background="" @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum" :page-size="listQuery.pageSize" :page-sizes="[5,10,15]" :total="total"></el-pagination>
    </div>
    <el-dialog title="关闭订单" :visible.sync="closeOrder.dialogVisible" width="30%">
      <span style="vertical-align: top">操作备注：</span>
      <el-input style="width: 80%" type="textarea" :rows="5" placeholder="请输入内容" v-model="closeOrder.content"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeOrder.dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCloseOrderConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { fetchList, closeOrder, deleteOrder, getfetchList } from "@/api/order";
import { formatDate } from "@/utils/date";

const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  merchantId: 1,
  status: 1,
  dateType: "",
  receiverPhone: ""
};

export default {
  name: "orderList",
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      listLoading: true,
      list: null,
      total: null,
      activeName: "1",
      operateType: null,
      multipleSelection: [],
      listitems: false,

      closeOrder: {
        dialogVisible: false,
        content: null,
        orderIds: []
      },
      dayIndex: 0,
      navIndex: 1,
      navList: [
        {
          id: 1,
          txt: "待发货",
          status: "1"
        },
        {
          id: 2,
          txt: "已发货",
          status: "2"
        },
        {
          id: 3,
          txt: "已关闭",
          status: "0"
        },
        {
          id: 4,
          txt: "退款",
          status: "4"
        }
      ],
      dayList: [
        {
          id: 1,
          txt: "昨天",
          type: "0"
        },
        {
          id: 2,
          txt: "近3天",
          type: "1"
        },
        {
          id: 3,
          txt: "近7天",
          type: "2"
        }
      ]
    };
  },
  created() {
    this.getList();
  },
  filters: {
    formatCreateTime(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    formatPayType(value) {
      if (value === 1) {
        return "支付宝";
      } else if (value === 2) {
        return "微信";
      } else {
        return "未支付";
      }
    },
    formatSourceType(value) {
      if (value === 1) {
        return "APP订单";
      } else {
        return "PC订单";
      }
    },
    formatStatus(value) {
      if (value === 1) {
        return "待发货";
      } else if (value === 2) {
        return "已发货";
      } else if (value === 3) {
        return "已完成";
      } else if (value === 4) {
        return "已关闭";
      } else if (value === 5) {
        return "无效订单";
      } else {
        return "待付款";
      }
    }
  },
  methods: {
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    // 昨天
    handleday(item) {
      this.dayIndex = item.id;
      this.listQuery.dateType = item.type;
      this.listLoading = true;
      this.getList();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleViewOrder(index, row) {
      this.$router.push({ path: "/oms/orderDetail", query: { id: row.id } });
    },
    handleCloseOrder(index, row) {
      this.closeOrder.dialogVisible = true;
      this.closeOrder.orderIds = [row.id];
    },
    headledown(item) {
      // item.listitems = true;
      item.listitems = !item.listitems;
      // item.
    },
    handleDeliveryOrder(index, row) {
      let listItem = this.covertOrder(row);
      this.$router.push({
        path: "/oms/deliverOrderList",
        query: { list: [listItem] }
      });
    },
    handleDeleteOrder(index, row) {
      let ids = [];
      ids.push(row.id);
      this.deleteOrder(ids);
    },

    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleCloseOrderConfirm() {
      if (this.closeOrder.content == null || this.closeOrder.content === "") {
        this.$message({
          message: "操作备注不能为空",
          type: "warning",
          duration: 1000
        });
        return;
      }
      let params = new URLSearchParams();
      params.append("ids", this.closeOrder.orderIds);
      params.append("note", this.closeOrder.content);
      closeOrder(params).then(response => {
        this.closeOrder.orderIds = [];
        this.closeOrder.dialogVisible = false;
        this.getList();
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000
        });
      });
    },
    switchTab(item) {
      this.navIndex = item.id;
      this.listQuery.status = item.status;
      // this.listQuery.status =cur;
      this.getList();
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then(response => {
        this.listLoading = false;
        response.data.list.map(item => {
          item.listitems = false;
        });
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },
    // 查看详情
    headleDetails(id, status) {
      // 订单状态：0待付款；1待发货；2已发货；3已关闭；4已退款;9全部
      if (status == 3) {
        this.$router.push({ path: "/kkg/closeOrder", query: { id: id } });
      } else if (status == 4) {
        this.$router.push({ path: "/kkg/refundedDetail", query: { id: id } });
      } else if (status == 0) {
        this.$router.push({ path: "/kkg/orderdetail", query: { id: id } });
      }
    },
    deleteOrder(ids) {
      this.$confirm("是否要进行该删除操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let params = new URLSearchParams();
        params.append("ids", ids);
        deleteOrder(params).then(response => {
          this.$message({
            message: "删除成功！",
            type: "success",
            duration: 1000
          });
          this.getList();
        });
      });
    },
    covertOrder(order) {
      let address =
        order.receiverProvince +
        order.receiverCity +
        order.receiverRegion +
        order.receiverDetailAddress;
      let listItem = {
        orderId: order.id,
        orderSn: order.orderSn,
        receiverName: order.receiverName,
        receiverPhone: order.receiverPhone,
        receiverPostCode: order.receiverPostCode,
        address: address,
        deliveryCompany: null,
        deliverySn: null
      };
      return listItem;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.input-width {
  width: 203px;
}
.app-container {
  background: #fff;
  min-height: 500px;
  .tab-tilte {
    width: 50%;
    height: 50px;
    li {
      float: left;
      width: 25%;
      padding: 10px 0;
      text-align: center;
      cursor: pointer;
    }
  }
  /* 点击对应的标题添加对应的背景颜色 */
  .tab-tilte .active {
    border-bottom: 2px solid #09f;
    color: #333;
    font-weight: bold;
  }
  .el-form-item__content {
    span {
      width: 80px;
      display: inline-block;
      cursor: pointer;
    }
    span.active {
      color: #09f;
    }
  }
  .table-container {
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .item {
      display: flex;
      justify-content: space-between;
      height: 48px;
      line-height: 48px;
      background: #f2f2f2;
      padding: 0 15px;
      box-sizing: border-box;
      margin-bottom: 1px;
      cursor: pointer;
    }
    .info {
      padding: 15px 15px 0;
      box-sizing: border-box;
      .iteminfo {
        width: 60%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .listname {
          width: 200px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          display: block;
          line-height: 40px;
        }
        .pirce,
        .purchase_quantity,
        .goods_amount {
          line-height: 40px;
        }
        .listimg {
          width: 40px;
          height: 40px;
          overflow: hidden;
        }
      }
    }
    .item_bottom {
      display: flex;
      padding: 10px 0;
      border-top: 1px solid #f1f1f1;
      justify-content: space-between;
      .message {
        width: 500px;
      }
      .message,
      .using_integrals,
      .freight,
      .actual_payment {
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
</style>


